<template>
    <div class="bg">
        <div class="back" @click="$router.push('/home')">返回首页</div>
        <div class="apply-sq">
      <span style="font-size:1.24rem;
font-family:PingFang SC;
font-weight:bold;margin-top: 20px">资料填写</span>
            <div class="form-item">
        <span class="label">
          姓名
        </span>
                <input v-model="form.name" class="input-text" type="text">
            </div>
            <div class="form-item">
        <span class="label">
          性别
        </span>
                <div class="sex-bar">
                    <div :class="form.sex==0?'left':'left-hover'" @click="select(1)">
                        <img v-if="form.sex == 1" src="@/assets/boy_selected@2x.png" class="no-selected" alt="">
                        <img v-if="form.sex == 0" src="@/assets/boy@2x.png" class="no-selected" alt="">
                        <span style="font-size: 18px;font-weight: 400;" :style="form.sex==1?'color:#58E4CB':'color: #c8c8c8'">男</span>
                    </div>
                    <div :class="form.sex==1?'right':'right-hover'" @click="select(0)">
                        <img v-if="form.sex == 1" src="@/assets/girl@2x.png" class="no-selected" alt="">
                        <img v-if="form.sex == 0" src="@/assets/girl_selected@2x.png" class="no-selected" alt="">
                        <span style="font-size: 18px;font-weight: 400;" :style="form.sex==0?'color:rgba(253,111,113,1)':'color: #c8c8c8'">女</span>
                    </div>
                </div>
            </div>
            <div class="form-item">
        <span class="label">
          年龄
        </span>
                <input v-model="form.age"  class="input-text" type="number">
            </div>
            <div class="form-item">
        <span class="label">
          才艺
        </span>
                <input v-model="form.gift" class="input-text" type="text">
            </div>
            <div class="form-item">
        <span class="label">
          电话
        </span>
                <input v-model="form.telephone" class="input-text" type="number">
            </div>
            <div class="form-item">
        <span class="label">
          学校
        </span>
                <input v-model="form.school" class="input-text" type="text">
            </div>
            <div class="form-item">
        <span class="label">
          比赛宣言
        </span>
            </div>
            <input v-model="form.declaration" class="input-text" style="width: 16rem;margin-top: 1.17rem" type="text">
            <div class="btn" @click="submit">提交</div>
            <van-overlay :show="loading">
                <div style=" display: flex;align-items: center;justify-content: center;height: 100%;color: white;font-size: 16px">
                    <van-loading type="spinner" />报名中....
                </div>
            </van-overlay>
        </div>
        <img src="../../../assets/slide-up.png" style="width: 2.34rem;height: 2.34rem;position: absolute;bottom:0rem" :class="slide" alt="">

    </div>
</template>

<script>
    /* eslint-disable */
    import sexSelect from '@/components/sex-select'
    import {
        Toast,
        Overlay,
        Loading
    } from 'vant'
    import {apply} from '@/api'
    export default {
        name: 'index',
        components: {
            sexSelect,
            [Overlay.name]: Overlay,
            [Loading.name]: Loading,
        },
        data () {
            return {
                slide: 'slide-up',
                loading: false,
                form: {
                    name: '',
                    sex: 1,
                    age: '',
                    gift: '',
                    telephone: '',
                    school: '',
                    declaration: ''
                }

            }
        },
        mounted () {
            window.addEventListener('scroll', this.handleScroll)
        },
        methods: {
            handleScroll () {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                // console.log(scrollTop)
                if (scrollTop <= 100) {
                    console.log('ok')
                    this.slide = 'slide-up'
                } else {
                    this.slide = 'no-slide'
                }
            },
            select (e) {
                this.form.sex = e
            },
            submit () {
                console.log(this.form.telephone.length)
                console.log(this.checkIsNull(this.form))
                if (this.checkIsNull(this.form).length > 0) {
                    Toast.fail('请确认信息填写完整')
                } else {
                    if (this.form.telephone.length != 11) {
                        Toast('请输入有效的手机号码')
                    } else {
                        this.loading = true
                        apply(this.form).then(res => {
                            console.log(res)
                            if (res.code === 1) {
                                this.loading = false
                                Toast.success('报名成功')
                            } else {
                                this.loading = false
                                console.log(this.form)
                                Toast.fail('报名失败,请检查信息稍后重试')
                            }
                        }).catch(e => {
                            this.loading = false
                            console.log(this.form)
                            Toast.fail('报名失败,请检查信息稍后重试')
                        }).finally(() => {
                            this.loading = false
                        })
                    }
                }
            },
            checkIsNull (obj) {
                return Object.keys(obj).filter(item => obj[item] == '')
            }
        },
        watch: {
            form: {
                deep: true,
                handler (newValue, oldValue) {
                    if (newValue.age != '' && newValue.age <= 0) {
                        this.form.age = 1
                    }
                    console.log(newValue)
                }
            }
        }
    }
</script>
<style>
    /*.bg2{*/
    /*background: url("../../assets/huodong.jpg") no-repeat;*/
    /*background-size: cover;*/
    /*}*/
    .no-slide{
        display: none;
    }
    @keyframes slide {
        from  {
            bottom: 0rem;
        }
        to {
            bottom: 1.17rem;
        }
    }

    .slide-up{
        animation: slide 2s infinite;
    }
    .back{
        position: absolute;
        left: 0rem;
        top: 2.34rem;
        width: 4.68rem;
        height: 2.34rem;
        background: rgba(255,255,255,1);
        border-top-right-radius: 1.17rem;
        border-bottom-right-radius: 1.17rem;
        color: rgba(0,0,0,0.7);
        line-height: 2.34rem;
        text-align: center;
        font-size: 0.75rem;
        z-index: 999;
    }
    input{
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
        line-height: 1.15rem;
        font-size: 0.9rem;
    }
    input:focus{
        border: 0px solid black;
        border-bottom-width: 1px;
    }
</style>
<style scoped>
    .btn:active{
        opacity: 0.5;
    }
    .btn{
        margin-top: 2.34375rem;
        width:18rem;
        height:2.8rem;
        background:#FFCE08;
        box-shadow:0rem 0rem 0rem 0rem rgba(147,123,12,0.24);
        border-radius:1rem;
        color: white;
        font-size: 16px;
        line-height: 2.85rem;
        text-align: center;
    }
    .bg {
        width: 100vw;
        height: 100vh;
        background: url("../../../assets/bg2.png");
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .apply-sq{
        width:20rem;
        height:34rem;
        background:rgba(255,255,255,1);
        opacity:0.97;
        box-shadow: 1px 1px 5px 5px rgba(0,0,0,0.2);
        border-radius:2.34rem;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: center;
    }
    .form-item{
        width: 90%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 1.6rem;
    }
    .label{
        font-size:0.9rem;
        font-family:Adobe Heiti Std;
        font-weight:normal;
        color:rgba(170,170,170,1);
        line-height:1.15rem;
    }
    .input-text{
        margin-left: 1.17rem;
        height: 1.15rem;
        width: 14rem;
    }
    .no-selected{
        position: relative;
        width: 1.3rem;
        height: 1.3rem;
        /*bottom: 0.2rem;*/
        margin-right: 0.46rem;
    }
    .sex-bar{
        width: 14rem;
        margin-left: 1.17rem;
        display: flex;
        justify-content: center;
    }
    .left{
        border: 0px solid #c8c8c8;
        height: 2.34rem;
        border-bottom-width: 1px;
        display: flex;
        justify-content: center;
        align-items: center;
        /*background: url("../../assets/boy@2x.png") center no-repeat;*/
        /*background-size: contain;*/
        width: 50%;
    }
    .left-hover{
        border: 0px solid #58E4CB;
        border-bottom-width: 1px;
        height: 2.34rem;
        display: flex;
        align-items: center;
        justify-content: center;
        /*background: url("../../assets/boy_selected@2x.png") center no-repeat;*/
        /*background-size: contain;*/
        width: 50%;
    }
    .right{
        border: 0px solid #c8c8c8;
        border-bottom-width: 1px;
        height: 2.34rem;
        display: flex;
        align-items: center;
        justify-content: center;
        /*background: url("../../assets/girl@2x.png") center no-repeat;*/
        /*background-size: contain;*/
        width: 50%;
    }
    .right-hover{
        border: 0px solid rgba(253,111,113,1);
        border-bottom-width: 1px;
        display: flex;
        justify-content: center;
        align-items: center;
        /*background: url("../../assets/girl_selected@2x.png") center no-repeat;*/
        /*background-size: contain;*/
        height: 2.34rem;
        width: 50%;
    }
</style>
